<template>
  <!-- <img :src="require(`@/assets/${test}`)"> -->
  <div class="modify">
    <div class="search">
      <input
        type="text"
        maxlength="20"
        v-model="searchTxt"
        @keyup.enter.native="searchArticle"
      />
      <span @click="searchArticle">搜索</span>
    </div>
    <div class="nothing" v-show="have">
      <h3>没有查找到文章呢</h3>
    </div>
    <div class="modifyarticles" v-for="(item, index) in articles" :key="item">
      <Transition>
        <div class="title_choose">
          <button class="btn">
            {{ item.style }}
            <svg
              t="1660145109217"
              class="icon"
              viewBox="0 0 1024 1024"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2511"
              width="200"
              height="200"
            >
              <path
                d="M573.056 752l308.8-404.608A76.8 76.8 0 0 0 820.736 224H203.232a76.8 76.8 0 0 0-61.056 123.392l308.8 404.608a76.8 76.8 0 0 0 122.08 0z"
                p-id="2512"
              ></path>
            </svg>
          </button>
          <div class="spans">
            <span @click="item.style = sty" v-for="sty in title_styles">{{
              sty
            }}</span>
          </div>
        </div>
      </Transition>
      <div class="artcle">
        <div class="title">
          <p>标题：</p>
          <input
            type="text"
            maxlength="16"
            placeholder="最多16个字"
            v-model="item.title"
          />
        </div>
        <div
          class="a_link"
          v-if="!(item.style === '个人生活') && !(item.style === '关于博客')"
        >
          <p>项目链接：</p>
          <input type="text" v-model="item.url_link" />
        </div>
        <textarea cols="60" rows="15" v-model="item.body"></textarea>
        <div class="somecharacter"></div>
      </div>
      <div class="tool">
        <h3>封面</h3>
        <img
          :src="
            item.hava_newbg
              ? item.newimgUrl
              : require(`@/assets/${item.imgUrl}`)
          "
          @click="
            this.$store.state.imgChoose2 = true;
            modifyimg = item.imgUrl;
            parentMethod(item.imgUrl);
          "
        />
        <p @click="mdArt(index)">修改</p>
      </div>
    </div>
    <searchtimg
      :bgNum="modifyimg"
      :bgindex="img2index"
      @updatebg="updbg"
      ref="child"
    ></searchtimg>
  </div>
</template>

<script>
import { searchArticle, modifyArticle } from "@/request/api/Articles.js";
import searchtimg from "@/components/Views/backstage/ModifyImage.vue";
import errorImg from "@/assets/img.png";
export default {
  name: "modifyarticles",
  //   mounted() {
  //     document.addEventListener("click", (e) => {
  //       if (!this.$refs.isselect.contains(e.target)) {
  //         this.is_select = false;
  //       }
  //     });
  //   },
    setup() {
    // 节流
    const btnClick = _.debounce(function() {
      // ....
      console.log('节流');
    }, 2000);
    // 防抖
    const btnClick2 = _.throttle(function() {
      // ....
      console.log('防抖');
    }, 2000);
    return {
      btnClick,
      btnClick2,
    };
  },
  computed: {
    errimg() {
      return 'this.src="' + errorImg + '"';
    },
  },
  data() {
    return {
      have: false,
      // title: "",
      // title_style: "项目中心",
      // textarea: ``,
      // project_link: "http://www.",
      searchTxt: ``,
      title_styles: ["项目中心", "维护广场", "个人生活", "关于博客"],
      articles: [],
      modifyimg: `img/项目中心_21312_1660315213258.png`,
      img2index: 0,
    };
  },
  components: {
    searchtimg,
  },
  methods: {
    async searchArticle() {
      this.have = false;
      if (!this.searchTxt)
        return ElMessage({
          message: "请输入搜索内容",
          type: "warning",
          duration: 1500,
        });
      const { data } = await searchArticle(this.searchTxt);
      this.articles = data.msg;
      this.articles.forEach((item) => {
        item.hava_newbg = false;
      });
      if (data.msg.length === 0) {
        this.have = true;
      } else {
        this.have = false;
      }
    },
    getImageUrl(url) {
      let iu = `../../../../../nodejs/${url}`;
      return iu;
    },
    updbg(msg) {
      console.log(msg);
      this.articles[msg[1]].newimgUrl = msg[0];
      this.articles[msg[1]].hava_newbg = true;
      console.log(this.articles);
    },
    parentMethod(msg) {
      this.$refs.child.childMethod(msg);
    },


    async mdArt(index) {
      console.log(`修改第${index}个文章`);
      let newbgi = "";
      if (this.articles[index].hava_newbg) {
        newbgi = this.articles[index].newimgUrl;
      }
      const { data } = await modifyArticle([
        this.articles[index].style,
        this.articles[index].title,
        this.articles[index].url_link,
        this.articles[index].imgUrl,
        this.articles[index].body,
        newbgi,
        this.articles[index].id,
      ]);
      console.log(data);
      if (data.status === 200) {
        return ElMessage({
          message: "修改成功",
          type: "success",
          duration: 1500,
        });
      } else {
        return ElMessage({
          message: "未知错误,修改失败",
          type: "warning",
          duration: 1500,
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
img {
  width: 300px;
  height: 300px;
}
.modify {
  display: flex;
  flex-direction: column;
  .nothing {
    h3 {
      padding-top: 40px;
      text-align: center;
      color: rgb(232, 232, 232);
      font-size: 30px;
    }
  }
  .search {
    position: relative;
    margin-top: 15px;
    align-self: center;
    width: 300px;
    height: 38px;
    background-color: #333740;
    border-radius: 5px;
    input {
      width: 220px;
      height: 34px;
      margin: 2px 3px 2px 2px;
      background-color: #b9b9b9;
      border: none;
      border-radius: 3px;
      padding-left: 5px;
      font-size: 18px;
      letter-spacing: 1.5px;
    }
    input:focus {
      outline: 1px solid rgb(0, 35, 191);
    }
    span {
      position: absolute;
      right: 6px;
      top: 0;
      display: inline-block;
      width: 68px;
      height: 38px;
      text-align: center;
      line-height: 38px;
      color: rgb(236, 236, 236);
      font-size: 20px;
    }
    span:hover {
      color: rgb(184, 255, 247);
      cursor: pointer;
    }
  }
}

.modifyarticles {
  letter-spacing: 1.5px;
  display: flex;
  padding: 5px;
  margin: 10px 0;
  margin-bottom: 20px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 30px;
  backdrop-filter: blur(3px);
  border-left: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  .artcle {
    margin: 15px;
    display: flex;
    flex-direction: column;
    .title {
      display: flex;
      justify-content: center;
      margin-bottom: 12px;
      p {
        font-size: 25px;
      }
      input {
        width: 400px;
        color: rgb(2, 159, 128);
        font-weight: 600;
      }
      input:focus {
        outline: rgb(9, 57, 201) solid 1px;
        box-shadow: 0 0 0 2.5px rgba(44, 98, 246, 0.4);
      }
    }
    .a_link {
      display: flex;
      p {
        font-size: 25px;
      }
      input {
        flex: 1;
        font-size: 20px;
        color: rgb(0, 97, 252);
      }
      input:focus {
        outline: rgb(9, 57, 201) solid 1px;
        box-shadow: 0 0 0 2.5px rgba(44, 98, 246, 0.4);
      }
    }
    textarea {
      margin-top: 25px;
      letter-spacing: 1.5px;
      resize: none;
      font-size: 20px;
      outline: none;
      background-color: rgb(193, 193, 193);
    }
  }

  .title_choose {
    width: 200px;
    display: flex;
    flex-direction: column;
    margin: 10px;
    font-size: 16px;
    color: rgb(197, 197, 197);

    button {
      color: rgb(197, 197, 197);
      width: 200px;
      text-align: left;
      padding: 8px;
      background-color: #333740;
      font-size: 18px;
      outline: none;
      border: none;
      border: 1.5px solid #4f534f;
      border-radius: 10px;
      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      letter-spacing: 1.5px;
      display: flex;
      justify-content: space-between;
      svg {
        fill: rgb(215, 215, 215);
        width: 23px;
        height: 23px;
        margin-right: 10px;
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }
    }
    button:hover,
    button:focus {
      color: #fff;
    }
    button:focus {
      border: 1.5px solid rgb(3, 3, 135);
      box-shadow: 0 0 0 2.5px rgba(44, 98, 246, 0.4);
    }
    button:focus svg {
      transform: rotateX(180deg);
    }
    button:focus + .spans {
      height: 160px;
    }
    div {
      overflow: hidden;
      margin-top: 3px;
      width: 200px;
      height: 0px;
      display: flex;
      flex-direction: column;
      background-color: #333740;
      border-radius: 10px;
      transition: height 0.2s ease-in;
      transform-origin: top;
      span {
        padding: 7px 9px;
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }
      span:hover {
        background-color: #3c3d3d;
      }
    }
  }
  .tool {
    margin-left: 30px;
    display: flex;
    flex-direction: column;
    h3 {
      text-align: center;
      color: #fff;
      font-size: 30px;
      margin: 10px 0;
    }
    img {
      width: 330px;
      height: 215px;
    }
    p {
      margin-top: 100px;
      align-self: center;
      text-align: center;
      line-height: 50px;
      width: 100px;
      height: 50px;
      font-size: 20px;
      font-weight: 600;
      color: #fff;
      border-radius: 20px;
      box-shadow: 0 0 5px 8px #747474;
      background-color: #3c3d3d;
      cursor: pointer;
      text-shadow: 0 0 10px rgba(3, 206, 192, 0.482),
        0 0 20px rgba(3, 206, 192, 0.482), 0 0 30px rgba(3, 206, 192, 0.482),
        0 0 40px rgba(3, 206, 192, 0.482);
      border: 2px solid #5d5d5d;
    }
  }
}
</style>